<template>

	<view class="pa">
		<view class="discover" >
			<view class="discover_top pad">
				<view class="discover_input ">
					<input type="text" v-model="searchcontent" placeholder-class="place" placeholder="请输入跑团名称" />
					<!-- <i class="icon">&#xe647;</i> -->
					<image class="search_icon" src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/othertwo/search_icon.png" mode=""></image>
					<view class="err" @click="clearinput"><i class="icon icon_error" v-if="searchcontent">&#xe66f;</i></view>
				</view>
				<view class="discover_btn" @tap="searchRun" v-if="searchcontent">搜索</view>
			</view>
			<!-- 推荐跑团 -->
			<view class="">
				<view class="filter_bg" v-if="bg_flag" @tap="changeBg"></view>
				<!-- 筛选列表 -->
				<view class="sl_filter">
					<view class="filter">
						<view :class="['filter_content', menuList_index == item.key ? 'filter_content_c' : '']" v-for="(item, index) in menuList" @click="select(item.key, index)" :key="index" >
							{{ item.title }}
							<i class="icon icono">&#xe650;</i>
							<i class="icon icont">&#xe64e;</i>
						</view>
						<view class="filter_b" v-for="(item, index) in menuList" v-if="item.key == menuList_index">
							<view :class="['filter_content_detail', items.flag ? 'filter_content_detail_c' : '']" v-for="(items, key) in item.detaillist" @click="selectdetail(items, key)">
								{{ items.title }}
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 跑团列表 -->
			<view class="pad" v-if="runlist.length">
				<view class="runlist " v-for="(item, index) in runlist" :key="index" @tap="torungroup(item.Id)">
					<!-- 距离 定位到右上角 -->
					<view class="run_km" v-if="item.distance >= 1">{{ item.distance_m }}km</view>
					<view class="run_km" v-else>{{ item.distance * 1000 }}m</view>
					<view class="pic"><image :src="item.Logo" mode="aspectFill"></image></view>
					<view class="message">
						<view class="run_name">
							{{ item.Title }}
							<image v-if="item.cation" src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/other/group_logo.png" mode=""></image>
						</view>
						<view class="run_slogan shenglueh">{{ item.Slogan }}</view>
						<view class="run_info">
							<view class="run_info_right">活动数{{ item.active_num }}</view>
							<view class="run_info_right">成员{{ item.user_num }}人</view>
							<view class="run_info_lef">
								<span>{{ item.City }}</span>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 没有跑团 -->
			<view class="noList" v-else>
				<view class="content">
					<image src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/index/nodata.png" mode=""></image>
					<text>无数据</text>
				</view>
			</view>
		</view>
		
		<!-- loading 遮罩层 -->
		<loading v-if="loadflag"></loading>
	</view>
</template>

<script>
import loading from '@/components/loading/loading.vue';
export default {
	components: { loading },
	data() {
		return {
			bg_flag: false,
			loadflag: true,
			searchcontent: '', // 搜索框内容
			// 控制筛选
			flag: false,
			menuList_index: 0,
			selecetNavIndex: 0, // 一级筛选的下标
			condition_index: 0,
			filterForm: {
				multi: '',
				user_order: '',
				active_order: '',
				distance: ''
			},
			condition: [{ tj: '综合排序' }, { tj: '离我最近' }, { tj: '人数最多' }, { tj: '活跃程度' }],
			team: [
				{ name: '姐妹团', num: '45' },
				{ name: '姐妹团', num: '45' },
				{ name: '姐妹团', num: '45' },
				{ name: '姐妹团', num: '45' },
				{ name: '姐妹团', num: '45' },
				{ name: '姐妹团', num: '45' }
			],
			currentpage: 1,
			runlist: [],
			menuList: [
				{
					title: '综合',
					key: '1-1',
					detaillist: [
						{
							title: '默认',
							value: '1-1-1',
							flag: false
						},
						{
							title: '热度',
							value: '1-1-2',
							flag: false
						}
					]
				},
				{
					title: '会员数',
					key: '2-2',
					detaillist: [
						{
							title: '默认',
							value: '2-2-1',
							flag: false
						},
						{
							title: '由多到少',
							value: '2-2-2',
							flag: false
						},
						{
							title: '由少到多',
							value: '2-2-3',
							flag: false
						}
					]
				},
				{
					title: '活动数',
					key: '3-3',
					detaillist: [
						{
							title: '默认',
							value: '3-3-1',
							flag: false
						},
						{
							title: '由多到少',
							value: '3-3-2',
							flag: false
						},
						{
							title: '由少到多',
							value: '3-3-3',
							flag: false
						}
					]
				},
				{
					title: '距离',
					key: '4-4',
					detaillist: [
						{
							title: '默认',
							value: '4-4-1',
							flag: false
						},
						{
							title: '离我最近',
							value: '4-4-2',
							flag: false
						},
						{
							title: '离我最远',
							value: '4-4-3',
							flag: false
						}
					]
				}
			]
		};
	},
	mounted() {
		this.getrunList();
	},
	onReachBottom() {
		if (this.currentpage == this.last_page) {
			this.toast('没有更多数据了');
			return;
		}
		uni.showLoading({
			title: '跑团加载中'
		});
		this.currentpage++;
		this.getrunList();
	},
	// 下拉刷新
	onPullDownRefresh() {
		this.currentpage = 1;
		this.runlist = [];
		this.getrunList();
	},
	methods: {
		// 设置搜索框
		clearinput() {
			this.searchcontent = '';
		},
		// 获取跑团列表
		getrunList() {
			this.ajax('club/clubList', {
				data: {
					page: this.currentpage,
					search_name: this.searchcontent,
					multi: this.filterForm.multi,
					user_order: this.filterForm.user_order,
					active_order: this.filterForm.active_order,
					distance: this.filterForm.distance
				},
				success: res => {
					 // console.log (res);
					var that = this;
					var list = res.msg.data;
					list.forEach(e => {
						var reg = RegExp('/?x-oss-process=image/');
						if (e.Logo && !reg.test(e.Logo)) {
							uni.getImageInfo({
								src: e.Logo,
								success: image => {
									if (image.width > image.height) {
										e.Logo = e.Logo + '?x-oss-process=image/rotate,0';
									}
								}
							});
						}
						e.distance_m = e.distance.toString().split('.')[0];
					});
					this.runlist = this.runlist.concat(res.msg.data);
					this.runlist.forEach(item => {
						if (item.Logo) {
							item.Logo = item.Logo.replace('http:', 'https:');
							// //  // console.log (item.Logo)
						}
					});
					uni.stopPullDownRefresh();
					uni.hideLoading();
					this.loadflag = false;
				}
			});
		},
		choosetj(key) {
			this.condition_index = key;
		},
		// 跳转到跑团信息也
		torungroup(key) {
			uni.navigateTo({
				url: '/pageB/run/rungroup?id=' + key
			});
		},
		selectdetail(items, key) {
			this.loadflag = true;
			if (!this.selecetNavIndex) {
				this.filterForm.multi = key;
				this.filterForm.user_order = 0;
				this.filterForm.active_order = 0;
				this.filterForm.distance = 0;
			} else if (this.selecetNavIndex == 1) {
				this.filterForm.user_order = key;
				this.filterForm.multi = 0;
				this.filterForm.active_order = 0;
				this.filterForm.distance = 0;
			} else if (this.selecetNavIndex == 2) {
				this.filterForm.active_order = key;
				this.filterForm.multi = 0;
				this.filterForm.user_order = 0;
				this.filterForm.distance = 0;
			} else if (this.selecetNavIndex == 3) {
				this.filterForm.distance = key;
				this.filterForm.active_order = 0;
				this.filterForm.multi = 0;
				this.filterForm.user_order = 0;
			};
			this.bg_flag = false;
			this.menuList.forEach(item => {
				item.detaillist.forEach(items => {
					items.flag = false;
				});
			});
			this.menuList[this.selecetNavIndex].detaillist[key].flag = !this.menuList[this.selecetNavIndex].detaillist[key].flag;
			this.detail_index = items.value;
			this.menuList_index = 0;
			// 遍历数组 把标题栏的文字设为默认
			this.menuList.forEach(item => {
				if (item.key == '1-1') {
					item.title = '综合';
				} else if (item.key == '2-2') {
					item.title = '会员数';
				} else if (item.key == '3-3') {
					item.title = '活动数';
				} else {
					item.title = '距离';
				}
			});
			// 设置标题上的文字
			this.menuList[this.selecetNavIndex].title = items.title;
			this.currentpage = 1;
			this.runlist = [];
			this.getrunList();
		},
		searchRun() {
			this.loadflag = true;
			this.currentpage = 1;
			this.runlist = [];
			this.getrunList();
		},
		changeBg() {
			this.bg_flag = false;
			this.menuList_index = 0;
		},
		// 下拉筛选
		select(key, index) {
			this.selecetNavIndex = index;
			if (this.menuList_index == key) {
				this.menuList_index = 0;
				this.bg_flag = false;
				return;
			}
			this.menuList_index = key;
			this.bg_flag = true;
		}
	}
};
</script>

<style lang="less" scoped>
@import url('../../static/less/discover/discover.less');
</style>
<style>
page {
	background-color: #ffffff;
}
</style>
